<template>
  <div class="strategy-list-wrapper">
    <v-header title="看攻略" ref="header"></v-header>

    <div ref="main" class="main" :style="{height: mainHeight + 'px'}">
      <ul class="strategy-list">
        <li v-for="item in strategyList" :key="item.id" @click="toDetail(item.id)">
          <div class="first-img" v-lazy:backgroundImage="item.firstImg">
            <p>{{item.title}}</p>
          </div>
          <div class="strategy-bottom">
            <p class="left">
              <i class="icon iconfont icon-brower-count" style="font-size: 14px"/><span class="num" style="margin-right: 16px;">{{item.browseCount}}</span>
              <i class="icon iconfont icon-collection-b" style="font-size: 11px"/><span class="num">{{item.collectionSum}}</span>
            </p>
            <p class="right">
              <span>{{item.userName}}</span>
              <img v-lazy="item.userHeadUrl"/>
            </p>
          </div>
        </li>
      </ul>
      <p v-show="strategyList.length > 0"  :style="{paddingBottom: paddingBottom + 'px'}" style="height: 44px; line-height: 44px; font-size: 13px; color: #999; text-align: center;">
        {{loadState == 'nomore' ? '~· 没有更多啦 ·~' : '正在加载...'}}</p>
      </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import { TransferDom, Popup } from 'vux'

import { isIphoneX } from '@/assets/js/brower'
import axios from '@/api/axiosApi'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { QINIU_PREFIX } from '@/api/config'
import { on } from '@/assets/js/dom'

export default {
  name: 'StrategyList',
  data() {
    return {
      loadState: 'normal',
      defaultAvatar,
      strategyList: []
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const scrollTop = vm.$store.getters.scrollTop
      if (vm.$refs.main && scrollTop.StrategyList) {
        vm.$refs.main.scrollTop = scrollTop.StrategyList
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    this.$store.commit('SET_SCROLL_TOP', {StrategyList: this.$refs.main.scrollTop})
    next()
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Scroll,
    Popup
  },
  created() {
    this.paddingTop = 24
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingTop = 34
      this.paddingBottom = 24
    }
    this.mainHeight = window.innerHeight - 40 - this.paddingTop

    this.pageNum = 1
    this._getPlayStrategList()
  },
  mounted() {
    this.scrollTop = 0
    on(this.$refs.main, 'scroll', (e) => {
      const scrollTop = this.$refs.main.scrollTop
      const wrapperHeight = this.$refs.main.clientHeight
      const wrapperScroll = this.$refs.main.scrollHeight
      if (this.loadState === 'normal' && wrapperScroll > wrapperHeight && (scrollTop + wrapperHeight + 1) >= (wrapperScroll - 44)) {
        this.pageNum++
        this._getPlayStrategList()
      }
      this.scrollTop = scrollTop
    })
  },
  methods: {
    _getPlayStrategList() {
      this.loadState = 'load'
      const _self = this
      axios.get(
        this,
        '/v1/playStrategy',
        {
          pageNum: this.pageNum,
          articleType: 1
        },
        data => {
          if (data.length === 0) {
            if (_self.pageNum > 0) {
              _self.loadState = 'nomore'
              if (_self.$refs.scroll) {
                _self.pageNum--
                _self.$refs.scroll.hiddenPullUpLoad()
              }
            } else {
              _self.$refs.scroll.hiddenPullDown()
            }
            return
          }
          data.forEach(item => {
            if (item.userHeadUrl) {
              if (item.userHeadUrl.indexOf(QINIU_PREFIX) > -1) {
                item.userHeadUrl += '-sheader'
              }
            } else {
              item.userHeadUrl = defaultAvatar
            }
          })
          if (_self.pageNum <= 1) {
            _self.strategyList = data
          } else {
            _self.strategyList = _self.strategyList.concat(data)
          }
          _self.$nextTick(() => {
            _self.loadState = 'normal'
          })
        },
        () => {
          _self.loadState = 'normal'
        }
      )
    },
    toDetail(id) {
      this.$router.push('/address/strategy/' + id)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.strategy-list-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background $color-background
  z-index 102
  .main
    overflow-x hidden
    overflow-y auto
    -webkit-overflow-scrolling touch
    -webkit-box-sizing border-box
  .strategy-list
    padding 0 16px
    background #ffffff
    li
      padding-top 16px
      padding-bottom 8px
      border-bottom 0.5px solid #e2e2e2
      &:last-child
        border-bottom none
    .first-img
      height calc(50vw - 15px)
      border-radius 2px
      background-position center
      background-size cover
      background-repeat no-repeat
      position relative
      p
        position absolute
        bottom 0
        left 0
        right 0
        color #ffffff
        font-size 15px
        padding 12px
        no-wrap()
    .strategy-bottom
      display flex
      justify-content space-between
      align-items center
      margin-top 8px
      line-height 1
      .left
        color #666
        font-size 12px
        .num
          margin-left 4px
        .dot
          margin 0 4px
      .right
        display flex
        align-items center
        color #333
        font-size 11px
        img
          display inline-block
          width 28px
          height 28px
          min-width 28px
          border-radius 50%
          margin-left 8px

</style>
